<template>
    <div class="box">
        <header>
            <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="$router.back()"
                @click-right="showShare = true">
                <template #right>
                    <van-icon name="ellipsis" size="22" />
                </template>
            </van-nav-bar>
        </header>
        <div class="content">
            <div><img :src="detailInfo.image" alt="" style="width:100%"></div>
            <div><van-tag type="danger">自营</van-tag>{{ detailInfo.title }}</div>
            <div> ￥ <span style="color:red;font-size:32px">{{ detailInfo.price }}.00</span></div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="totalCount" @click="$router.push('/cart')" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="toCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>

        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
    </div>
</template>

<script>
import request from '@/utils/request.js'
import { mapMutations, mapGetters } from 'vuex'
export default {
    data() {
        return {
            detailInfo: {},
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ]
        }
    },
    computed: {
        ...mapGetters(['totalCount']),
    },
    // 生命周期
    mounted() {
        console.log(this.$route.params.id, 'id')
        // 拿到id后要做数据请求
        request.get('/getItem', { params: { id: this.$route.params.id } }).then(res => {
            this.detailInfo = res.data.data
        })
    },
    methods: {
        ...mapMutations(['addItem']),
        toCart() {
            // 先验证是否登录。如果已经登录，可以加入到购物车。没有登录，跳转到登录页面
            if (localStorage.getItem('token')) {
                // 可以加入到购物车
                // cartList = this.detailInfo
                this.addItem(this.detailInfo)
            } else {
                // 跳转到登录页面
                this.$router.push('/login')
            }

        }
    }
}  
</script>